<template>
  <div id="TaskMangeList">
    <div class="ImportData">
        <el-button size="small" @click="addGdbData">新建批次并导入地理数据文件</el-button>
    </div>
    <el-table  :data="tableData" row-key="batch_id" style="width: 100%">
        <el-table-column prop="batch_id" label="编号" width="120" align="center">
        </el-table-column>
        <!-- <el-table-column prop="task_name" label="导入批次"  align="center"> -->
        </el-table-column>
        <el-table-column prop="sub_set_name" label="归属数据子集" align="center">
        </el-table-column>
        <el-table-column prop="file_name" label="地图数据文件" align="center">
        </el-table-column>
<!--        <el-table-column label="任务状态"  align="center">
            <template slot-scope="scope">
                <span  v-if="(scope.row.task_status == 101010)">待提交</span>
                <span  v-if="(scope.row.task_status == 101020)">待审核</span>
                <span  v-if="(scope.row.task_status == 101030)">已撤回</span>
                <span  v-if="(scope.row.task_status == 101040)">审核通过</span>
                <span  class="DangerColor cursor" v-if="(scope.row.task_status == 101050)" @click="rejectResult(scope.row.audit_remark)">审核驳回</span>
            </template>
        </el-table-column> -->
        <el-table-column prop="srname" label="GIS坐标系"  align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注"  align="center">
        </el-table-column>
        <el-table-column prop="create_time" label="提交时间"  align="center">
        </el-table-column>
        <el-table-column label="操作"  align="center">
            <template slot-scope="scope">
<!--                <el-button  v-if="(scope.row.task_status == 101010)&&(scope.row.import_progress == 100 )" @click="submitTask(scope.row,'1')">继续处理</el-button>
                <el-button  v-if="(scope.row.task_status == 101010)&&(scope.row.import_progress != 100 )" @click="$message.warning('请耐心等待上传');">等待上传</el-button>
                <el-button  v-if="scope.row.task_status == 101020" @click="revocationTask(scope.row)">撤回</el-button>
                <el-button  v-if="scope.row.task_status == 101030" @click="submitTask(scope.row,'1')">继续处理</el-button>
                <el-button  v-if="scope.row.task_status == 101040" @click="submitTask(scope.row,'2')">查看</el-button>
                <el-button  v-if="scope.row.task_status == 101050" @click="submitTask(scope.row,'2')">查看</el-button> -->
								<el-button   @click="submitTask(scope.row,scope.$index)">继续处理</el-button>
            </template>
        </el-table-column>
        <el-table-column  label="上传进度"  align="center">
            <template slot-scope="scope">
                <div v-if=" scope.row.import_progress !=100">
                    <div> 
                        <el-progress type="circle"  :percentage='scope.row.import_progress' :width='64'></el-progress> 
                    </div>
                </div>
                <div v-else>
                    上传完成
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button @click="deleteBatch(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="导入地理数据文件" :visible.sync="dialogVisible" width="40%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="任务备注：" prop="taskName">
                <el-input v-model="ruleForm.taskName"></el-input>
            </el-form-item>
            <el-form-item label="地理数据文件" prop="GdbData">
                <el-select v-model="ruleForm.GdbData" placeholder="请选择">
                    <el-option v-for="(item,index) in gdbDataList" :key='index' :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="归属数据子集：" prop="SubData">
                <el-select v-model="ruleForm.SubData" placeholder="请选择">
                <el-option  v-for="(item,index) in subDataList" :key='index' :label="item.sub_set_name"  :value="item.sub_set_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="GIS坐标系：" prop="coordinate">
                <el-select v-model="ruleForm.coordinate" placeholder="请选择">
                    <el-option  v-for="(item,index) in coordinateList" :key='index' :label="item.name"  :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <div class="btnBox">
                <span @click="submitForm('ruleForm')" class="EnsureBtn ">
                    确定
                </span>
            </div>
        </el-form>
    </el-dialog>
    
    <el-dialog title="驳回原因" :visible.sync="dialogReject" width="30%" >
        <span>{{audit_remark?audit_remark:'暂无'}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogReject = false">确 定</el-button>
        </span>
    </el-dialog>
    
    <div class="pagination">
      <el-pagination
        background
        layout="sizes ,prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="changPage"
        :page-sizes="[3 , 5, 10, 20]"
        :page-size="pagination.page_size"
        :current-page="pagination.page_index"
        :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import TaskMangeService from '../../services/TaskMangeService.js';
import SubDataSetService from '../../services/SubDataSetService.js'
import bus from '../common/bus';
export default {
    data() {
        return {
            TaskMangeService:new TaskMangeService(),
            subSetService: new SubDataSetService,
            set_id:null,
            timer:null,
            tableData: [],
            taskState:this.$getWords(101),
            dialogVisible: false,
            dialogReject: false,
            audit_remark:'',
            ProgressDialogVisible:true,
            coordinateList:[
                {id:3857,name:'墨卡托投影(webMercator)'},
                {id:4326,name:'地球坐标系(wgs84) '},
                {id:-1,name:'火星坐标系(gcj02)'}
            ],
            gdbDataList:[],
            subDataList:[],
            ruleForm: {
                taskName: '',
                GdbData: '',
                SubData:'',
                coordinate:''
            },
            rules: {
                taskName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                GdbData: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                SubData: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                coordinate:[
                    { required: true, message: '请选择坐标系类型', trigger: 'change' }
                ]
            },
            ajaxData: {
                page_index: 1,
                page_size: 10,
            },
            pagination:{},
						checkedCities:[],
						cities:[],
						tableIndex:null,
        }
    },
    created() {
        let id = JSON.parse(localStorage.getItem('zhdq_gismanage_dataset')).data_set_id
        this.set_id =id;
        // this.ajaxData.data_set_id =id;
        // this.getTasklistData();
				this.getSubDataSetList();
    },
    mounted() {
       setTimeout(()=>{
           let resLength = this.isShowProgressbar().length;
           if(resLength){
                this.timer = setInterval(()=>{this.getProgressbarList()},3000); 
           }
       },1000)
    },
    beforeDestroy(){
        //销毁计时器；
        clearInterval(this.timer)
        this.timer = null;
    },
    methods: {
        //获取任务管理列表；
        async getTasklistData(){
			// this.ajaxData.sub_set_id = this.subDataList[0].sub_set_id;
			this.ajaxData.data_set_id=Number(this.set_id)
            let res = await this.TaskMangeService.batchList(this.ajaxData);
            if(res.code == 200){
                this.tableData = res.data.batch_list.length>0?res.data.batch_list:[];
                this.pagination=res.data.pagination;
							if(this.tableIndex!=null)	localStorage.setItem('batchInfo', JSON.stringify(res.data.batch_list[this.tableIndex].extend_info.batch_info))
                var index =(this.pagination.page_index - 1) * this.pagination.page_size;
                this.tableData.map((ele, i) => {
                    this.$set(ele, "index", index + i + 1);   
                });
            }
        },
        //获取地图列表；
        async getGdbList(){
            let res = await this.TaskMangeService.batch_gdb_list();
            if ( res.code == 200 ) {
                this.gdbDataList = res.data;
            } else {
                this.gdbDataList = [];
            }
        },
        //获取子数据集列表；
        async getSubDataSetList() {
            let paramData = {"data_set_id": Number(this.set_id)}
            let res = await this.subSetService.getAll(paramData);
            if ( res.code == 200 ) {
                this.subDataList = res.data;
            } else {
                this.subDataList = [];
            }
							this.getTasklistData();
        },
        //添加地图数据文件；
        async addSubDataAPI(paramData) {
            let res = await this.TaskMangeService.batch_add(paramData);
            if ( res.code == 200 ) {
                setTimeout(()=>{
                    this.getTasklistData();
                    this.timer = setInterval(()=>{this.getProgressbarList()},3000);
                },2000)
                this.$refs['ruleForm'].resetFields();
            } else {
                return false;
            }
        },
        //撤回任务

        isShowProgressbar(){
            let file_idArray =[];
            this.tableData.forEach(ele => {
                if(ele.import_progress != 100){
                    file_idArray.push(ele.file_id);
                }
            });
            return  file_idArray;
        },
        //查看文件地图文件上传进度；
        async getProgressbarList(){
            let file_idArray = this.isShowProgressbar();
            let ProgressBarData = {'file_ids':file_idArray};
            let res = await this.TaskMangeService.batch_progressList(ProgressBarData)
            if(res.code==200){
              res.data.forEach(ele =>{
								for(let i=0;i<this.tableData.length;i++){
									if(ele.file_id == this.tableData[i].file_id){ 
										this.$set(this.tableData[i],'import_progress', ele.import_progress)
									}
								}
              })
							//clearInterval(this.timer) //加上这句有问题，不再拉取任务进度了
            }else{
                this.$message.error(res.msg);
            }
        },
        //添加地图数据；
        addGdbData(){
            this.dialogVisible = true;
            this.getGdbList();
        },
        //继续处理
//         submitTask(data,flag){
//             this.$router.push({path:'/taskModule',query:{task_id:data.task_id,flag:flag}})
//         },
				submitTask(data,index){
						this.tableIndex = index;
						this.getSubDataSetList();
						this.$router.push({path:'/taskModule',query:{batch_id:data.batch_id}});
				},
        //撤回处理；
        revocationTask(data){
            let parseData ={id:data.task_id};
            this.revocationTaskAPI(parseData);
        },
        //建立新任务；
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let paramData = {}
                    paramData.remark = this.ruleForm.taskName;
                    paramData.file_name = this.ruleForm.GdbData;
                    paramData.sub_set_id = this.ruleForm.SubData;
                    paramData.srid = this.ruleForm.coordinate;
                    this.addSubDataAPI(paramData)
                    this.dialogVisible = false;
                } else {
                    return false;
                }
            });
        },
        //驳回原因；
        rejectResult(remark){
            this.audit_remark =remark;
            this.dialogReject = true;
        },
        //分页操作；
        changPage(page_index){
            this.ajaxData.page_index = page_index;
            this.getTasklistData();
            document.querySelector('.content-box').scrollTop = 0;
        },
        handleSizeChange(val) {
            this.ajaxData.page_size =val;
            //局部滚动回到顶点
            document.querySelector('.content-box').scrollTop = 0;
            this.getTasklistData();
        },
        //删除批次
        deleteBatch( row ){
            this.$confirm('确定删除该批次？','提示').then( async () => {
                let res = await this.TaskMangeService.deleteBatch(row.batch_id);
                if(res.code==200){
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration:1000
                    });
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    #TaskMangeList{
        background-color: #fff;
        .ImportData{
            padding:12px 0 12px 20px; 
        }
        .btnBox{
            text-align: center;
            .EnsureBtn{
                display: inline-block;
                width: 320px;
                cursor: pointer;
                line-height: 32px;
                border: 1px solid #797979;
                border-radius: 4px;
            }
        }
        .circleBox{
            display: flex;
            justify-content: center;
        }
    }

</style>

<style lang="scss">
#TaskMangeList{
    .el-select{
        width: 100%;;
    }
}
</style>


